<template>
	<view style="width:750rpx; height:750rpx"><l-echart @touchend="touchEnd" ref="chartRef"></l-echart></view>
</template>
<script setup>
import * as echarts from 'echarts/dist/echarts.esm.js'
import { ref, onMounted } from 'vue'


const chartRef = ref(null)
const echartObj = ref(null);
const option = {
  // tooltip: {
		// trigger: 'axis',
		// axisPointer: {
		// 	type: 'shadow' 
		// },
		// confine: true
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
	  trigger: 'axis',
	  position: function(point,params,dom,rect,size){
		  if(params[0].data){
			  return [point[0], '10%'];
		  }else {
			  return [-100,-100];
		  }
	  },
	  axisPointer: {
		  type: 'cross',
		  axis: 'auto',
		  snap: true,
	  }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, null, null],
      type: 'line',
	  showSymbol: false,
      areaStyle: {},
	  markPoint: {
		data: [
			{ coord: ['Thu', 934],symbol: 'circle',symbolSize:5 }
		]
	  },
	  markLine: {
		 symbol: ['none'],
		 label: {
			 show: true
		 },
		 data: [{ 
			 // type: 'average', name: 'Avg' ,
			 yAxis: 934,
			 
		 }]
	  }
    }
  ]
};
onMounted( ()=>{
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    setTimeout(async()=>{
        if(!chartRef.value) return
        const myChart = await chartRef.value.init(echarts);
		echartObj.value = myChart;
        myChart.setOption(option)
		setTimeout(()=>{
			console.log("指示")
			echartObj.value.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: 4,
				function(point,params,dom,rect,size){
					console.log(params);
				  if(params[0].data){
					  return [point[0], '10%'];
				  }else {
					  return [-100,-100];
				  }
				}
			})
		},200);
    },300)
});

const touchEnd = async (e) => {
	if(!echartObj.value) return
	setTimeout(()=>{
		echartObj.value.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: 3
		})
	},200);
}
</script>
<style lang="scss">
</style>